﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .ui-pg-input
    {
        width: 50px;
        text-align: right;
    }
</style>
<h2>
    ประเภทวัสดุ</h2>
<div class="form-horizontal">
    <fieldset>
        <legend>แสดงรายการข้อมูลประเภทวัสดุ</legend>
        <div class="control-group">
            <label class="control-label" for="input01">
                ชื่อประเภทวัสดุ :</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="input01" />
                <p class="help-block">
                    กรอกส่วนใดส่วนหนึ่งของชื่อตัวแทนจำหน่ายเพื่อใช้ค้นหา</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
            </label>
            <div class="controls">
                <input type="button" class="btn btn-primary" id="btnSubmit" value="ค้นหา" />
                <input type="button" class="btn" id="btnClear" value="ล้างข้อมูล" />
            </div>
        </div>
        <div class="control-group">
            <table id="list">
            </table>
            <div id="pager">
            </div>
        </div>
    </fieldset>
</div>
<form style="display: none;" action="" method="post" id="form_alter">
    <input type="hidden" id="form_param1" name="id" value="" />
</form>
<script type="text/javascript">

    $(document).ready(function () {

        initialGrid();

        $("#btnSubmit").click(function () {
            doSearch();
        });

        $("#btnClear").click(function () {
            doClear();
        });

    });

    function doSearch() {

        var keyword = $("#input01").val();

        var params = {
            keyword: keyword
        };

        $('#list').jqGrid('clearGridData');
        $('#list').setGridParam({ url: '/MaterialType/GetMaterialType', postData: params }).trigger('reloadGrid');
    }

    function doClear() {
        $("#input01").val("");
        $('#list').jqGrid('clearGridData');
    }

    function initialGrid() {

        var updateDialog = {
            url: '/MaterialType/Update'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , beforeShowForm: function (form) {
                    // "editmodlist"
                    var grid = $('#list');
                    var dlgDiv = $("#editmod" + grid[0].id);
                    var dlgWidth = dlgDiv.width();
                    var dlgHeight = dlgDiv.height();

                    if (dlgDiv[0] == undefined) {
                        dlgDiv = $("#delmod" + grid[0].id);
                        dlgDiv[0].style.width = "350px";
                        dlgWidth = dlgDiv.width();
                        dlgHeight = dlgDiv.height();
                    }

                    dlgDiv[0].style.top = Math.round(($(window).height() - dlgHeight) / 2) + "px";
                    dlgDiv[0].style.left = Math.round(($(window).width() - dlgWidth) / 2) + "px";
                }
                , afterShowForm: function (formId) {

                }
                , afterclickPgButtons: function (whichbutton, formid, rowid) {

                }
                , modal: true

                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#list");
                    var selectedRow = list.getGridParam("selrow");
                    var rowData = list.getRowData(selectedRow);
                    ajaxData = { supplier_id: rowData.supplier_id };

                    return ajaxData;
                }

                , width: "450"
        };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มรายการประเภทวัสดุ";
        $.jgrid.edit.editCaption = "แก้ไขรายการประเภทวัสดุ";
        $.jgrid.del.caption = "ลบรายการ";
        $.jgrid.del.msg = "ต้องการลบรายการนี้หรือไม่?";

        $("#list").jqGrid({
            datatype: 'json',
            mtype: 'POST',
            colNames: ['id', 'ชื่อประเภท', 'หน่วย', 'วันที่สร้างรายการ'],
            colModel: [
                    { name: 'material_type_id', index: 'material_type_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                    { name: 'material_type_name', index: 'material_type_name', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true }, editoptions: { dataInit: function (elem) { $(elem).width(350); } }, formoptions: { elmsuffix: ' *'} },
                    { name: 'material_type_unit', index: 'material_type_unit', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true }, editoptions: { dataInit: function (elem) { $(elem).width(150); } }, formoptions: { elmsuffix: ' *'} },
                    { name: 'material_type_create_date', index: 'material_type_create_date', width: 40, align: 'left', key: false}],
            pager: $('#pager'),
            rowNum: 10,
            width: 850,
            rownumbers: true,
            multiselect: true,
            sortname: 'material_type_create_date',
            sortorder: "desc",
            viewrecords: true,
            shrinkToFit: true,
            caption: 'รายการตัวแทนจำหน่าย',
            autowidth: true
        }).navGrid('#pager',
                {
                    edit: true, add: true, del: true, search: false, refresh: true
                },
                updateDialog,
                updateDialog,
                updateDialog
            );

    }

</script>
